<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id = "app">
    <h3 id = "paragraph"></h3>
    <input type = "text" id = "input">
</div>
<script>
    /* 这个是了解一下proxy的原理
    // let proxy = new Proxy(代理的对象，拦截的操作)
    let obj = {a:1}

    let proxy = new Proxy(obj,{
        //获取值拦截
        get:function (target,name){ //对象，属性名
            console.log("拦截之后的获取值")
            return target[name]
        },
        set:function (target,name,value){ //对象，属性名，设置新的值
            console.log("开始设置值")
            target[name] = value
        }
    })

    console.log(proxy.a) //拦截值
    proxy.a = 2 //重新设置值
    console.log(proxy.a) //重新获取修改后的值

     */

    //正片开始
    //第一步，获取对象
    let paragraph = document.getElementById("paragraph")
    let input = document.getElementById("input")

    //第二步，准备好数据
    let data = {
        text:"今晚吃鸡!"
    }

    //第三步，代理处理
    let proxy = new Proxy(data,{
        //获取值拦截
        get:function (target,name){ //对象，属性名
            console.log("拦截之后的获取值")
            return target[name]
        },

        //设置值
        set:function (target,name,value){ //对象，属性名，设置新的值
            console.log("开始设置值")
            paragraph.innerHTML = value //设置的时候给界面渲染
            input.value = value //
            target[name] = value //给data重新赋值
        }
    })

    //触发set代码给界面渲染
    proxy.text = data.text

    //文本框输入可以实时给模型赋值
    input.addEventListener("input",function (e){ //回调函数接收事件对象e
        console.log(e,e.target)
        proxy.text = e.target.value //事件对象在文本框发生，所以e.target就是文本框对象，文本框对象输入的值实时发送给proxy
    })
</script>
</body>
</html>